import React from 'react';
import { Modal, Form, Row, Col, Radio } from 'antd';
import config from '../../../config/config';

const FormItem = Form.Item;
const RadioGroup = Radio.Group;

class FetchModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      iconStyle: "line"
    }
  }

  render() {

    const { fetchModalVisible, onCancel, onFetch, onExport, onChangeBrowser, browserType } = this.props;

    const browserList = [{ key: "Edg", name: "MicroSoft Edge" }, { key: "Chrome", name: "Google Chrome" }];
    const radioOptions = browserList.map(item => <Radio value={item.key}>{item.name}</Radio> );

    return (
      <div>
        <Modal
          visible={fetchModalVisible}
          title={"抓取图标"}
          onCancel={onCancel}
          onOk={onFetch}
          width={500}
          okText={"确定"}
          cancelText={"取消"}
          destroyOnClose={true}
        >
          <div>
            <div>是否确定从<a href='https://remixicon.com/' target='_blank'> Remix Icon </a>官网抓取图标数据 ？</div>
            <div style={{margin: "15px 0px 15px 0px"}}>注意：支持浏览器 MicroSoft Edge 和 Google Chrome，版本均130；抓取图标过程由 Selenium 后台运行，请耐心等待！
            </div>
            <div>浏览器：<Radio.Group value={browserType} onChange={onChangeBrowser}>{radioOptions}</Radio.Group></div>
          </div>
        </Modal>
      </div>
    );
  };
}

export default FetchModal;
